<template>
  <div class="authentication">
    <div class="com-top-nav">
      <van-nav-bar
        title="企业认证"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div>
      <van-cell-group>
        <van-field
          v-model="formData.username"
          required
          clearable
          label="营业执照名称"
          placeholder="请输入营业执照名称"
        />
        <van-field
          label="营业执照编号"
          v-model="formData.id"
          placeholder="请输入营业执照编号"
          required
        />
        <van-field
          v-model="formData.phone"
          label="企业联系电话"
          placeholder="请输入企业联系电话"
          required
        />
        <van-cell class="is-require" :value="formData.area" title="企业地址" is-link @click="showArea = true" />
        <van-popup v-model="showArea" position="bottom" :overlay="false">
        <van-area :area-list="areaList"  @confirm="confirm" value="140400" @cancel="cancel" :columns-num="2" title="选择地址" />
        </van-popup>
        <van-field
          v-model="formData.detailArea"
          label="企业详细地址"
          placeholder="请输入企业详细地址"
          required
        />
        <img @click="clickimg1" v-show="formData.file" :src="formData.file" alt="" style="height:100px;width:140px;margin:20px;">
        <van-uploader v-show="!formData.file" class="auth-img" :after-read="onRead">
          <div>
            <van-icon name="photograph"/>
            <p>企业营业执照</p>
          </div>
        </van-uploader>
      </van-cell-group>
      <div class="button">
        <van-button size="large" @click="handleSubmit">提交认证</van-button>
      </div>

    </div>
  </div>
</template>
<script>
  import validator from '../../common/validatorFunction';
  import areaList from '../../../static/js/area'
  import {Area, Popup} from 'vant';
  export default {
    name:'enterpriseCert',
    components: {
      vanArea: Area,
      vanPopup: Popup
    },
    data(){
      return {
        isShowError: false,
        errorTips: '',
        areaList: areaList,
        showArea: false,
        formData: {
          file:'',
          username: '',
          id: '',
          phone: '',
          area: '',
          detailArea: ''
        },
        rules: {
          name: [
            {require: true, message: '请输入营业执照名称'}
          ],
          id: [
            {require: true, message: '请输入营业执照编号'}
          ],
          phone: [
            {require: true, message: '请输入企业联系电话'}
          ]
        }
      }
    },
    name: 'authentication',
    methods: {
      clickimg1(){
        this.formData.file=''
      },
      onRead(file) {
        // this.formData.file = file.content;
        let _this =this;
        // this.imgurl1 = file.content
        let Form = new FormData();
        Form.append('avatar', file.file);
        this.axios.post('/api/upload',Form).then(res=>{
          if(res.data.err_code ==0){
            this.formData.file = res.data.data.imgUrl;
          }
        })
      },
      onClickLeft() {
        this.$router.go(-1);
      },
      confirm(columnsNum) {
        this.showArea = false;
        let area = '';
        columnsNum.forEach(item => {
          area += item.name + ' ';
        })
        this.formData.area = area;
      },
      cancel() {
        this.showArea = false;
      },
      handleSubmit() {
        // 保存数据
        const rulesResult = validator(this.formData, this.rules);
        console.log(rulesResult);
        if (rulesResult.result) {
            let uid=JSON.parse(sessionStorage.getItem('user')).uid,
                license_name=this.formData.username,
                license_no=this.formData.id,
                phone=this.formData.phone,
                address=this.formData.area,
                address_detail=this.formData.detailArea,
                image=this.formData.file;
              let params = {
                uid, license_name, license_no, phone, address, address_detail, image
              }
              this.axios.get('/api/company/verify',{params}).then(res=>{
                    if(res.data.err_code == 0){
                       this.$toast({message:'认证成功'})
                       this.$router.go(-1)
                    }
              }).catch(e=>{
                  this.$toast({message:e})
              })
        } else {
          const alertMessage = [];
          for (const key in rulesResult.detail) {
            if (!rulesResult.detail[key].isPass) {
              alertMessage.push(rulesResult.detail[key].message);
            }
          }
          this.isShowError = true;
          this.errorTips = alertMessage[0];
          this.$toast({message:this.errorTips, position: 'top'});
        }
      }
    }
  }
</script>

<style scoped lang="less" type="text/less">
  @import url('../../../static/style/var');
  .is-require {
    &::before {
      content: '*';
      position: absolute;
      left: 7px;
      font-size: 14px;
      color: #f44;
    }
  }
  .button {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 30px;
  }

  .identify-require {
    color: @weak-tips-color;
    line-height: 40px; /*no*/
    font-size: @weak-tips-size; /*px*/
    padding-left: 15px;
    .text {
      color: @normal-font-color;
      font-weight: bold;
    }
    &::before {
      content: '*';
      position: absolute;
      left: 7px;
      font-size: 14px;
      color: #f44;
    }
  }

  .auth-img {
    width: 140px;
    height: 100px;
    margin-left: 5px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    text-align: center;
    border: 1px solid @border-color-default;
    border-radius: 4px;
    div {
      margin-top: 30px;
    }
  }
</style>
